<template>
<div class="form_div" id="sqone">
  <div class="f_title">立即申请{{name}}</div>
  <div class="f_desc">由国内顶尖的专家团队带来专业的技术支持</div>
  <div class="flex_sa">
    <div class="f_left">
      <div class="l_title">我们提供的帮助</div>
      <div class="b_icon"> <img src="~@/assets/img/right.png" alt=""> 提供系统化的自动化解决方案，快速提升招商效率</div>
      <div class="b_icon"> <img src="~@/assets/img/right.png" alt=""> 平台高进阶使用培训，快速上手、全员使用</div>
      <div class="b_icon"> <img src="~@/assets/img/right.png" alt=""> 提供技术支持，实现自动化的应用</div>
      <div class="b_icon"> <img src="~@/assets/img/right.png" alt=""> 大量的案例分享，如何更好的使用产品</div>
      <div class="ph">拨打 400-962-5108 联系你的专属顾问，我们将竭诚提供帮助！</div>
    </div>
    <div class="f_right border_view">
      <Form ref="formValidate" class="form" :model="form" :rules="ruleValidate" v-if="!isOk">
        <FormItem label="姓名" prop="username">
          <Input v-model="form.username" size="large" placeholder="请输入姓名"/>
        </FormItem>
        <FormItem label="手机" prop="mobile">
          <Input v-model="form.mobile" size="large" placeholder="请输入手机号"/>
        </FormItem>
        <FormItem label="留言">
          <Input v-model="form.desc" type="textarea" :rows="4"  size="large" placeholder="请输入留言"/>
        </FormItem>
      </Form>
      <div class="ok flex flex_a" v-if="isOk">
        <img src="~@/assets/img/cg.png" alt="">
        <div>
          <div class="title_tt">恭喜，您的申请已提交成功！</div>
          <div class="title_dd">我们会在一个工作日内安排专属顾问跟您对接！</div>
        </div>
      </div>
      <div v-if="!isOk" class="btn sq_btn" @click="handleSubmit">申 请</div>
    </div>
  </div>
</div>
</template>
<script>
import {ApplycomreportAdd} from '@/api/api'
export default {
  components:{
  },
  props:['name'],
  data(){
    return{
      type:'',
      content:'',
      active:0,
      isOk:false,
      form: {
        type:'',
        name: '',
        mobile:'',
        username:''
      },
      ruleValidate: {
        username: [
            { required: true, message: '姓名必须填写', trigger: 'blur' }
        ],
        mobile: [
            { required: true, message: '手机号称必须填写', trigger: 'blur' },
        ],
        name: [
            { required: true, message: '项目必须填写', trigger: 'blur' },
        ],
      },
      scrollIntoViewOptions:{
        block: 'start',
        behavior: 'smooth'
      },
      isMobile:false,
      isOk:false
    }
  },
  created(){
    if(document.documentElement.clientWidth<=980){
      this.isMobile = true
    }
  },
  methods:{
    handleSubmit(){
      this.form.name = this.name
      this.form.type = this.name
      this.$refs.formValidate.validate((valid) => {
        if (!valid) {
          return
        }
        let data= Object.assign({},this.form)
        this.isOk = false
        ApplycomreportAdd(data).then(res=>{
          this.$message.success(res.msg)
          this.$message.success(res.msg)
          this.isOk = true
        }).catch(err=>{
          this.$message.error(err)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.content_ddiv{
  width: 1206px;
  margin: auto;
  padding-bottom: 100px;
  .title_ccc{
    color: #061928;
    font-size: 32px;
    padding-top: 73px;
    padding-bottom: 50px;
    text-align: center;
    width: 100%;
  }
  .c_item{
    width: 49.6%;
    height: 200px;
    padding: 0 15px;
    padding-left: 30px;
    text-align: left;
    margin-top: 10px;
    display: flex;
    align-items: center;
    background: rgba(247,247,247,1);
    box-shadow: 0 0 5px 0 rgba($color: #000000, $alpha: .05);
    .cccc{
      width: 470px;
      background: rgba(247,247,247,1);
      padding: 25px;
      padding-top: 0;
    }
    .title_item{
      font-size: 22px;
      color: #061928;
      padding-bottom: 10px;
      position: relative;
    }
  }
}
.tab_list{
  width: 100%;
  position: relative;
  &::after{
    position: absolute;
    content: ' ';
    width: 200%;
    height: 1px;
    left: -50%;
    border-bottom: 1px solid #e6e5e9;
    bottom: 1px;
    z-index: 0;
  }
  .iconfont{
    font-size: 20px;
  }
  .tab_item{
    margin-right: 30px;
    margin-left: 30px;
    // width: 140px;
    padding: 0 10px;
    height: 74px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    color: #192544;
    position: relative;
    margin-bottom: 3px;
    .m_r20{
      margin-right: 10px;
    }
    // height: 60px;
    // line-height: 60px;
    // font-size: 16px;
    // color: #303030;
    // margin-right: 60px;
    // cursor: pointer;
    // position: relative;
  }
  .active{
    z-index: 1;
    border-bottom: 3px solid rgba(35,133,237,1);
  }
}
.cont_item{
  margin-top: 80px;
  .item_text{
    width: calc(50% - 30px);
  }
  .item_img{
    width: calc(50% - 30px);
  }
  .iconfont1{
    font-size: 36px;
  }
  .item_title{
    font-size: 26px;
    font-weight: 800;
    color: #081536;
    margin: 6px 0 20px;
  }
  .item_desc{
    color: #666;
    font-size: 15px;
    line-height: 28px;
  }
  .ysbtn{
    height: 32px;
    width: 110px;
    border-radius: 16px;
    border: 1px solid #081536;
    color: #081536;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    margin-top: 20px;
    position: relative;
    .img_yl{
      position: absolute;
      content: ' ';
      z-index: 10;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
    .iconfont2{
      font-size: 14px;
      margin-right: 6px;
    }
  }
}
.form_div{
  width: 1200px;
  margin: auto;
  margin-top: 140px;
  text-align: left;
  .f_title{
    font-size: 26px;
    color: #192544;
    text-align: center;
    margin-bottom: 12px;
  }
  .f_desc{
    font-size: 16px;
    color: #192544;
    text-align: center;
    margin-bottom: 30px;
  }
  .f_left{
    width: 440px;
    .l_title{
      margin-top: 34px;
      margin-bottom: 12px;
      font-size: 18px;
      color: #192544;
      padding-left: 20px;
    }
    .b_icon{
      font-size: 13px;
      color: #192544;
      line-height: 34px;
      img{
        width: 10px;
        height: 10px;
        margin-right: 6px;
      }
    }
    .ph{
      font-size: 14px;
      color: rgba(0,0,0,.45);
      line-height: 22px;
      margin-top: 20px;
      padding-left: 20px;
    }
  }
}
.f_right{
  width: 450px;
  padding: 0px 20px 40px;
  border-radius: 6px;
}
.sq_btn{
  width: 100%;
  border-radius: 4px;
  height: 52px;
  line-height: 52px;
  background: #f93;
  color: #fff;
  text-align: center;
  font-size: 18px;
}
@media screen and (max-width: 981px) {
  .cont_d{
    width: 80% !important;
  }
  .content_ddiv{
    width: 100% !important;
    .tab_item{
      font-size: 18px;
      font-weight: 400;
      margin: 0;
      text-align: center;
    }
  }
  .cont_item{
    flex-wrap: wrap;
    width: calc(100% - 30px);
    box-shadow: 0 0 10px 0 rgba($color: #000000, $alpha: .1);
    padding: 0 10px 20px 10px;
    margin: 40px 15px;
    .item_text{
      width: 100%;
      padding: 20px;
      margin-bottom: 20px;
    }
    .item_img{
      width: 100%;
    }
  }
  .form_div{
    width: 100% !important;
    .f_desc{
      margin-bottom:0
    }
    .flex_sa{
      flex-wrap: wrap;
    }
    .f_left{
      width: calc(100% - 50px);
      margin: 0 25px;
      .ph{
        margin-bottom: 40px;
      }
    }
    .f_right {
      width: calc(100% - 30px);
      margin: 0 15px;
    }
  }
}
.ok{
  margin-top: 80px;
 .title_tt{
   font-size: 23px;
   font-size: 600;
   line-height: 26  px;
   margin-bottom: 20px;
 }
 .title_dd{
   font-size: 16px;
 }
}
</style>